Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve inputs for headers, query params, to stretch when focused (like HTTPie) #234

Merged
merged 26 commits into from
Sep 20, 2024
Merged

Improve inputs for headers, query params, to stretch when focused (like HTTPie) #234

merged 26 commits into from
Sep 20, 2024

Conversation

brettimus
Copy link
Contributor

@brettimus brettimus commented Sep 4, 2024 •
edited
Loading

TODO

  • Press ESC to blur input
  • Investigate why newlines are possible in FireFox
  • Test safari.... 🙈

Summary

This PR introduces a new input-like component that we can use for adding query/path parameters and headers in their respective forms.

It also factors out the codemirror editor components into their own module in the components directory

httpie-inputs.mp4

@brettimus brettimus force-pushed the prototype-stretchy-inputs-for-keyvalue-form branch from 80ab7a3 to 2ee130b Compare September 16, 2024 15:03
@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Sep 16, 2024 •
edited
Loading

Open in Stackblitz

pnpm add https://pkg.pr.new/fiberplane/fpx/@fiberplane/studio@234

pnpm add https://pkg.pr.new/fiberplane/fpx/@fiberplane/hono-otel@234

commit: 2e0b67b

@brettimus brettimus force-pushed the prototype-stretchy-inputs-for-keyvalue-form branch from 6a06164 to fc6441d Compare September 16, 2024 16:45
@brettimus
Copy link
Contributor Author

Hmmm one annoying thing that came up is that the codemirror inputs swallow our keyboard shortcuts (cmd+g and cmd+b) when they have focus

@brettimus brettimus marked this pull request as ready for review September 17, 2024 16:47
@brettimus brettimus force-pushed the prototype-stretchy-inputs-for-keyvalue-form branch from 9a0a1ab to a51d58b Compare September 18, 2024 09:05
keturiosakys
keturiosakys approved these changes Sep 19, 2024
View reviewed changes
Copy link
Member

@keturiosakys keturiosakys left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Ideally we'd "blur" the text input when you hit Escape so that it would unblock using the cmd+b and other keyboard shortcuts.

@brettimus brettimus force-pushed the prototype-stretchy-inputs-for-keyvalue-form branch from a51d58b to da44bb3 Compare September 19, 2024 15:20
@brettimus
Copy link
Contributor Author

Looks good! Ideally we'd "blur" the text input when you hit Escape so that it would unblock using the cmd+b and other keyboard shortcuts.

did it!

flenter
flenter approved these changes Sep 19, 2024
View reviewed changes
Copy link
Member

@flenter flenter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

studio/src/components/CodeMirrorEditor/CodeMirrorInput.tsx Outdated Show resolved Hide resolved
studio/src/components/CodeMirrorEditor/CodeMirrorInput.tsx Outdated Show resolved Hide resolved
@brettimus
Prototype stretchy inputs for keyvalue forms
1406ce3
@brettimus
Mild cleanup
cc65823
@brettimus
Add key value stretchy inputs
5e4f5e5
@brettimus
Using CodeMirror and almost there but trickiness with truncating text…
a68552b 
… with ellipsis
@brettimus
Add an httpie-like input for key value tables
88a26ab
@brettimus
Disable codemirror features on inputs
bd7ce48
@brettimus
Remove failed prototype for stretchy input
cdf7afc
@brettimus
Fix input styles and prevent jumping
50cd280
@brettimus
Refactor CodeMirrorInput to its own file and use it for the value inp…
b3c727a 
…ut as well
@brettimus
Remove some unnecessary styles
a765305
@brettimus
Fix some minor jumping, but not all the jumping
31c705a
@brettimus
Remove unused Input
f664060
@brettimus
Resolve issue with content in request params panel pushing the tabs t…
2b65c6f 
…oo high
@brettimus
Fix issue with tab indentations in the codemirror input
c39c019
@brettimus
Make path parameter key inputs readonly
2fc9efa
@brettimus
Modify readonly styles and fix jumping issue
aa5a30b
@brettimus
Remove dead code and fix a few nits
5ffbb7b
@brettimus
Move the codemirror editors to their own Component folder
386ddfb
@brettimus
Split out all the separate codemirror editors
14c2884
@brettimus brettimus force-pushed the prototype-stretchy-inputs-for-keyvalue-form branch from cd2a46e to 92d98b6 Compare September 20, 2024 08:33
@brettimus brettimus merged commit ab0f048 into main Sep 20, 2024
3 checks passed
@brettimus brettimus deleted the prototype-stretchy-inputs-for-keyvalue-form branch September 20, 2024 10:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@keturiosakys keturiosakys keturiosakys approved these changes

@flenter flenter flenter approved these changes

@mies mies mies approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@brettimus @mies @flenter @keturiosakys